<template>
  <div class="content-table">
    <!-- <el-card> -->
    <!-- class="project-list-container" -->
    <div>
      <div class="list-h">
        <!-- <el-button type="primary" @click="handleOpen" class="add-option"
          >添加项目</el-button
        > -->
        <i></i>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="formInline"
          ref="formRef"
        >
          <el-form-item label="合同名称" prop="contractNameLike">
            <el-input
              v-model="formInline.contractNameLike"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同编号" prop="contractNumLike">
            <el-input
              v-model="formInline.contractNumLike"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="createUserNameLike">
            <el-input
              v-model="formInline.createUserNameLike"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
        <el-table
          :data="tableData"
          border
          v-adaptive="{ bottomOffset: 83 }"
          v-loading="loading"
          :height="300"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <template #empty>
            <el-empty :image-size="150" description="暂无数据"></el-empty>
          </template>
          <el-table-column type="index" label="序号" width="50">
            <template v-slot="scope">
              <span>{{
                (formInline.pageNum - 1) * formInline.pageSize +
                scope.$index +
                1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="contractNum"
            label="合同编号"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="contractName"
            label="合同名称"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="partyA"
            label="甲方单位"
            width="110"
          ></el-table-column>
          <el-table-column
            prop="directorAName"
            label="甲方负责人"
            width="120"
          ></el-table-column>
          <!-- <el-table-column
            prop="directorAEmail"
            label="甲方负责人邮件"
          ></el-table-column>
          <el-table-column
            prop="directorAPhone"
            label="甲方负责人电话"
          ></el-table-column> -->
          <el-table-column
            prop="partyB"
            label="乙方单位"
            width="110"
          ></el-table-column>
          <el-table-column
            prop="directorBName"
            label="乙方负责人"
            width="120"
          ></el-table-column>
          <!-- <el-table-column
            prop="directorBEmail"
            label="乙方负责人邮件"
          ></el-table-column>
          <el-table-column
            prop="directorBPhone"
            label="乙方负责人电话"
          ></el-table-column> -->
          <el-table-column
            prop="createUserName"
            label="创建人"
          ></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>

          <el-table-column label="操作" width="220" fixed="right">
            <template #default="{ row }">
              <el-button
                type="text"
                @click="handleDetail(row)"
                v-auth="`/project/manage__contract--look`"
                >查看</el-button
              >
              <el-button
                type="text"
                @click="handleEdit(row)"
                v-auth="`/project/manage__contract--edit`"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="handleGroup(row)"
                v-auth="`/project/manage__contract--group`"
                >管理项目组成员</el-button
              >
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除该条记录吗？"
                @confirm="handleDelete(row)"
              >
                <template #reference>
                  <el-button
                    type="text"
                    v-auth="`/project/manage__contract--delete`"
                    v-showbtn="`${row.createUser}`"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-skeleton>
    </div>
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />
    <el-dialog
      title="编辑合同"
      v-model="dialogVisible"
      destroy-on-close
      width="680px"
      :before-close="handleCloseDialog"
    >
      <contract-view
        mode="edit"
        :contract-info="contractInfo"
        v-model:dialogVisibleContract="dialogVisible"
        @resetGetData="resetGetData"
      />
    </el-dialog>
    <el-dialog
      title="管理项目成员"
      v-model="dialogVisible2"
      destroy-on-close
      width="680px"
      :before-close="handleCloseDialog"
    >
      <project-group
        mode="edit"
        :contract-info="contractInfo"
        v-model:dialogVisibleGroup="dialogVisible2"
        @resetGetData="resetGetData"
      />
    </el-dialog>
    <el-dialog
      title="查看详情"
      v-model="dialogVisible3"
      destroy-on-close
      width="650px"
      :before-close="handleCloseDialog"
    >
      <contract-detail :contract-info="contractInfo" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, inject, watch, defineComponent } from "vue";
import RePagination from "/@/components/RePagination/index.vue";
import ContractView from "./ContractView.vue";
import ProjectGroup from "./ProjectGroup.vue";
import ContractDetail from "./ContractDetail.vue";
// import { successMessage, warnMessage } from "/@/utils/message";
import NotifMessage from "/@/utils/message/notification";

import { postProContractList, postProjectContractDelete } from "/@/api/project";
// import { useRouter } from "vue-router";
import { useProjectStoreHook } from "/@/store/modules/project";

export default defineComponent({
  name: "contractTable",
  components: {
    RePagination,
    ContractView,
    ProjectGroup,
    ContractDetail
  },

  setup() {
    // const router = useRouter();
    const formRef = ref<HTMLFormElement | null>(null) as any;
    const activeCategory: any = ref(inject("active"));
    let loading = ref<boolean>(false);
    let dialogVisible = ref<boolean>(false);
    let dialogVisible2 = ref<boolean>(false);
    let dialogVisible3 = ref<boolean>(false);
    let total = ref<number>(0);
    let contractInfo = ref(null);
    const projectHook = useProjectStoreHook();

    let formInline = reactive({
      contractNameLike: "",
      contractNumLike: "",
      createUserNameLike: "",
      projectPathLike: "",
      pageNum: 1,
      pageSize: 20
    });
    let state = reactive({
      tableData: []
      // userInfo: {}
    });

    // 请求表格数据
    const getTableData = async (obj: object = {}) => {
      loading.value = true;
      try {
        const { code, data } = await postProContractList(obj);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };
    // 打开添加项目弹窗
    // const handleOpen = (): void => {
    //   dialogVisible.value = true;
    // };

    // const emitClose = (isSubmit: boolean) => {
    //   dialogVisible.value = false;
    //   if (isSubmit) {
    //     getTableData();
    //   }
    // };

    // 重置条件
    const handleReset = (): void => {
      formRef.value.resetFields();
      formInline.projectPathLike = "";
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    const resetGetData = () => {
      getTableData(formInline);
    };

    const handleCloseDialog = () => {
      dialogVisible.value = false;
      dialogVisible2.value = false;
      dialogVisible3.value = false;
    };

    // 编辑合同
    const handleEdit = (row): void => {
      dialogVisible.value = true;
      contractInfo.value = row;
    };

    const handleGroup = (row): void => {
      dialogVisible2.value = true;
      contractInfo.value = row;
      console.log(row);
    };

    // 删除合同
    const handleDelete = async item => {
      try {
        const { code, message } = await postProjectContractDelete({
          id: item.id
        });
        if (code === 200) {
          NotifMessage.success("删除成功");
          getTableData();
        } else {
          NotifMessage.error(`${message}`);
        }
      } catch (err) {
        console.log(err);
      }
    };

    const handleDetail = row => {
      dialogVisible3.value = true;
      contractInfo.value = row;
    };

    // 监听左侧树的变化，发起请求
    watch(activeCategory, newVal => {
      if (newVal.id) {
        formInline.projectPathLike = newVal.projectPath;
      } else {
        formInline.projectPathLike = "";
      }
      getTableData(formInline);
    });

    // 监听左侧项目数据变化
    watch(
      () => projectHook.leftRefresh,
      newVal => {
        if (newVal) {
          getTableData(formInline);
        }
      }
    );

    // const name = inject("active");
    // console.log(name, "name");
    // 请求数据
    // onMounted(() => {
    getTableData(formInline);
    // });

    return {
      ...toRefs(state),
      contractInfo,
      total,
      formRef,
      dialogVisible,
      dialogVisible2,
      dialogVisible3,
      loading,
      formInline,
      // handleOpen,
      handleReset,
      handleSearch,
      handleEdit,
      resetGetData,
      handleDelete,
      handleDetail,
      handleGroup,
      handleCloseDialog
      // emitClose,
    };
  }
});
</script>
<style lang="scss" scoped>
.content-table {
  width: 100%;
  height: 100%;
  // padding: 10px;
  // border: 1px solid #e4e7ed;
}
.content-table :deep .el-card__body {
  height: 100%;
  width: 100%;
}

.content-table :deep .el-table__fixed-right-patch {
  background: #eef1f6;
}
</style>
